<template>
  <view class="audio">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
      text="切换朗诵视频"
      :image="videoIcon"
      @click="rightClick"
    />
    <view class="background"> </view>
    <view class="content">
      <view class="head">
        <view class="records">
          <view
            class="cover-view"
            :class="{ 'records-cover-animation': !pause }"
          >
            <image
              :src="recordsCoverImage"
              mode=""
              class="records-cover"
            ></image>
            <image
              :src="info.cover"
              mode="aspectFill"
              class="audio-cover"
              v-if="info.cover"
            ></image>
          </view>
          <image
            :src="recordsPicksImage"
            mode=""
            class="records-picks"
            :class="{ 'records-picks-animation': !pause }"
          ></image>
        </view>
        <view class="hot-info">
          <view class="hot-title ellipsis-3">
            {{ info.title }}
          </view>
          <view class="author">
            <!-- <text>作者：</text> -->
            <text>{{ info.subtitle }}</text>
          </view>
        </view>
      </view>
      <view class="article-body">
        <rich-text :nodes="info.content"></rich-text>
      </view>
      <view class="audio-player">
        <le-audio
          ref="audioPlayer"
          :activeIndex="0"
          :autoplay="false"
          :src="info.audio"
          @onPause="onPause"
        ></le-audio>
      </view>
    </view>
    <SubmitButton
      text="录音跟练"
      :leftIcon="leftIcon"
      @handleClick="handleClick"
    ></SubmitButton>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import SubmitButton from "@/components/submit-button/index.vue";
import LeAudio from "./components/le-audio/le-audio.vue";
import { onLoad, onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { getArticleInfo } from "@/api/article";
const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
const videoIcon = ref("/static/images/article/shipin@3x.png");
const recordsCoverImage = ref("/static/images/article/changpian@3x.png");
const recordsPicksImage = ref("/static/images/article/changpian2@3x.png");
const playIcon = ref("/static/images/article/bofang@3x.png");
const pauseIcon = ref("/static/images/article/zhanting@3x.png");
const leftIcon = ref("/static/images/article/luyin@3x.png");
const id = ref("");
const info = ref({});
const pause = ref(true);
const audioPlayer = ref("");
onLoad((options) => {
  if (options && options.id) {
    id.value = options.id;
    getDetail();
  }
});
onUnload(()=>{
  destroyPlayer()
})
const pausePlayer = () => {
  audioPlayer.value?.pausePlayer();
};
const destroyPlayer = () => {
  audioPlayer.value?.destroyPlayer();
};

const getDetail = async () => {
  try {
    let res = await getArticleInfo({ id: id.value });
    info.value = res.data;
    console.log(info.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
const onPause = (value) => {
  pause.value = value;
};
const handleClick = () => {
  pausePlayer();
  uni.$u.route({
    url: "/pages/article/recorder/recorder",
    params: {
      id: id.value,
    },
  });
};
const rightClick = () => {
  toDetailPage();
};
const toPage = () => {
  let pages = getCurrentPages();
  let index = 0;
  for (let item of pages) {
    if (item.route.indexOf("pages/article/video/video") != -1) {
      uni.navigateBack({
        delta: pages.length - index - 1,
      });
      return;
    }
    index++;
  }
  toDetailPage();
};
const toDetailPage = () => {
  // uni.$u.route({
	// 		// type:"redirectTo",
	// 		url: `/pages/article/video/video?id=${id.value}`,
	// 		params:{
	// 			id:id.value
	// 		}
	// 	})
  // uni.navigateTo({
	// 	url: `/pages/article/video/video?id=${id.value}`
	// })
	uni.redirectTo({
		url: `/pages/article/video/video?id=${id.value}`
	})
};
</script>

<style lang="scss" scoped>
.audio {
  position: relative;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .content {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    padding: 48rpx 32rpx;
    padding-bottom: 128rpx;

    .head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 80rpx;

      .records {
        width: 340rpx;
        height: 340rpx;
        position: relative;

        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        .cover-view {
          width: 340rpx;
          height: 340rpx;
          position: relative;
          animation: rotate 18s linear infinite;
          animation-play-state: paused;
          -webkit-animation-play-state: paused;
          /* Safari 和 Chrome */

          .records-cover {
            width: 340rpx;
            height: 340rpx;
            position: relative;
            z-index: 5;
          }

          .audio-cover {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 148rpx;
            height: 148rpx;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            z-index: 8;
          }
        }

        .records-picks {
          position: absolute;
          right: -40rpx;
          top: -40rpx;
          z-index: 10;
          transform: rotate(-35deg);
          transform-origin: 50% 20% 0;
          width: 223rpx;
          height: 263rpx;
        }

        .records-cover-animation {
          animation-play-state: running;
          -webkit-animation-play-state: running;
          /* Safari 和 Chrome */
        }

        .records-picks-animation {
        }
      }

      .hot-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 20rpx;

        .hot-title {
          font-size: 44rpx;
          font-weight: bold;
          color: #1a1a1a;
          line-height: 58rpx;
        }

        .author {
          font-size: 28rpx;
          color: #939999;
          line-height: 28rpx;
          margin-top: 20rpx;
        }
      }
    }
    .article-body {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #939999;
      // height: 176rpx;
      // overflow-y: auto;
    }
    .audio-player {
      padding: 60rpx 0;
    }
  }
}
</style>
